<template>
  <div class="video">
    <video :id="id" controls autoplay muted />
  </div>
</template>
<script>
import 'videojs-flash'
import flvjs from 'flv.js'
export default {
  name: 'VideoItem',
  props: {
    id: {
      type: String,
      default() {
        return 'videoElement'
      }
    },
    videoInfo: {
      type: Object,
      default() {
        return null
      }
    }
  },
  data() {
    return {
      flvPlayer: null,
      sipMsg: null,
      flv: null
    }
  },
  watch: {
    videoInfo(val) {
      var that = this
      console.log(val)
      this.$nextTick(() => {
        that.Init()
      })
    }
  },
  mounted() {
    const that = this
    this.$nextTick(() => {
      that.Init()
    })
  },
  methods: {
    Init() {
      if (flvjs.isSupported()) {
        if (this.videoInfo.src != null) {
          // var videoElement = document.getElementById('videoElement')
          // console.log(videoElement)
          var videoElement = document.getElementById(this.id)
          this.flvPlayer = flvjs.createPlayer({
            type: 'flv',
            isLive: true,
            hasAudio: false,
            url: this.videoInfo.src
          })

          this.flvPlayer.attachMediaElement(videoElement)
          this.flvPlayer.load()
          this.flvPlayer.play()
        }
      }
    },
    playVideo() {
      // var that = this
      // console.log(21)
      // // eslint-disable-next-line no-undef
      // var videoPlayer = videojs(
      //   'my-player',
      //   {
      //     sources: [
      //       {
      //         src: '',
      //         type: 'rtmp/flv'
      //       }
      //     ],
      //     muted: true,
      //     controls: true,
      //     autoplay: true,
      //     loop: true,
      //     techOrder: ['html5', 'flash'],
      //     width: '640',
      //     height: '640'
      //   },
      //   function() {
      //     this.play()
      //   }
      // )
      // videoPlayer.src = that.videoInfo.src
      // videoPlayer.load = that.videoInfo.src
      // console.log(videoPlayer)
    }
  },
  render(h, context) {
    const { id, videoInfo } = context.props
    const vnodes = []
    if (id) {
      vnodes.push(<svg-icon icon-class={id}/>)
    }

    if (videoInfo) {
      vnodes.push(<span slot='videoInfo'>{(videoInfo.src)}</span>)
    }
    return vnodes
  }
}
</script>
<style lang="less" scoped>
.content {
  background: #000;
}
.video {
  // height: 27rem;
  background-color: #bbc13d;
  // margin: 50px auto;
}

.video video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill
}
</style>
